<template>
	<view class="content">
		<view class="fm-box">
			<input
				class="text"
				focus
				placeholder="请输入"
				type="text"
				v-model="value"
			/>
			<checkbox-group @change="handleChange">
				<label>
					<checkbox value="1" />
					强相似度
				</label>
			</checkbox-group>

			<view style="margin-top: 10px; font-size: 12px; line-height: 24px">
				<text>
					提示：如下“*”可理解为空格字符,空格字符越多，更改王者名称越不容易重复
				</text>
				<view style="text-indent: 2em">
					规则1：输入框中的所有空格会被转为空格名称(推荐),如“嘎 嘎 你
					好”，得到“嘎*嘎*你*好”。
				</view>
				<view style="text-indent: 2em">
					规则2：没有勾选强相似度，会在第二个字后面增加一个空格字符,如“嘎嘎你好”，得到“嘎嘎*你好”。
				</view>
				<view style="text-indent: 2em">
					规则3：勾选强相似度，会在第二个字后面增加多个字符，取决于你输入文字的长度，如“嘎嘎你好”4个字，得到“嘎嘎****你好”。
				</view>
			</view>
		</view>
		<view>
			<button @click="handleCopy">复制</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: '',
			strength: '' //是否 强相似度 1是
		};
	},
	methods: {
		handleChange(e) {
			this.strength = e.detail.value[0];
		},
		/** 在字符串中某个位置插入新字符  */
		insertCharAt(str, index, char) {
			if (index > str.length) {
				return str;
			}
			const newChar =
				this.strength === '1' ? ''.padEnd(str.length, char) : char;
			return str.substring(0, index) + newChar + str.substring(index);
		},
		handleCopy() {
			if (!this.value) {
				uni.showToast({
					title: '请输入文字',
					icon: 'none'
				});
				return;
			}
			const zeroWidth = '\u200b';
			const regular = /\s/g;
			if (regular.test(this.value)) {
				let newValue = this.value.replace(regular, zeroWidth);
				uni.setClipboardData({
					data: newValue,
					showToast: true,
					success: () => {}
				});
				return;
			}
			uni.setClipboardData({
				data: this.insertCharAt(this.value, 1, zeroWidth),
				showToast: true,
				success: () => {}
			});
		}
	}
};
</script>

<style lang="scss">
.content {
	padding: 10px;

	.fm-box {
		margin-bottom: 60px;

		.text {
			border: 1px solid #ccc;
			padding: 10px;
			border-radius: 6px;
			margin-bottom: 10px;
		}
	}
}
</style>
